<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/components.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <my-component>
        </my-component>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
</div>
</body>
</html>

<script>
    var msg = "this is custom msg";
    Vue.component('my-component', {
        template: '<div class="alert alert-danger">A custom component! and {{ msg }}</div>',
        data: function () {
            return {msg: 'msg'};
        }
    });

    var data = { counter: 0 };
    var Child = Vue.component('simple-counter', {
        template: '<button class="btn btn-warning" v-on:click="counter += 1">{{ counter }}</button>',
        // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
        // 但是我们返回给每个组件的实例的却引用了同一个data对象
        data: function () {
            return {counter:0}
        }
    });

    new Vue({
        el: "#box",
//        template: '<div class="text-success">{{ message }}</div>',
        components: {
            // <my-component> 将只在父模板可用
            'my-component': Child
        },
        data: {
            message: "MESSAGE"
        }

    })
</script>